<template>
  <el-tabs type="border-card" style="height: 300px">
    <el-tab-pane label="能耗分项占比（年）">
      <div ref="dayOnlineChart" style="height: 250px;"></div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>

export default {
  props: [
    'selectedEnergyId',
    'selectedEnergy',
    'selectedShowType'
  ],
  watch : {
    selectedEnergyId(n, o) {
      if (n !== o) {
        this.fetchData(this.initChart)
      }
    },
    selectedShowType(n, o) {
      if (n !== o) {
        this.initChart()
      }
    }
  },
  data() {
    return {
      chart: null,
      list: [],
      option: {
        tooltip: {
          trigger: 'item',
          formatter: function (c) {
            return '项目：' + c.data.name + '<br>能耗：' + c.data.value + ' ' + c.seriesName + '<br>占比：' + c.percent + '%';
          }
        },
        series: [
          {
            name: 'kgce',
            type: 'pie',
            data: [
              {
                value: 335,
                name: '直接访问'
              },
              {
                value: 234,
                name: '联盟广告'
              },
              {
                value: 1548,
                name: '搜索引擎'
              }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.fetchData(this.initChart)
  },
  unmounted() {
  },
  methods: {
    fetchData: function (fuc) {
      const data = {content: {energyId: this.selectedEnergy.energy.id}}
      this.$axios({url: '/ems/client/index/item/compare', data: data}).then((content) => {
        this.list = content.list
        fuc()
      })
    },
    initChart: function () {
      const list = this.list
      this.option.series[0].data = []
      for (let i = 0; i < list.length; i ++) {
        const item = list[i]
        if (this.selectedEnergy.showType === 'real') {
          this.option.series[0].name = this.selectedEnergy.energy.unite;
          this.option.series[0].data.push({name: item.name, value: this.$doubleVal(item.increaseRealValue)});
        }else if (this.selectedEnergy.showType === 'stand') {
          this.option.series[0].name = this.selectedEnergy.standUnite;
          this.option.series[0].data.push({name: item.name, value: this.$doubleVal(item.increaseStandValue)});
        }else if (this.selectedEnergy.showType === 'cash') {
          this.option.series[0].name = this.selectedEnergy.cashUnite;
          this.option.series[0].data.push({name: item.name, value: this.$doubleVal(item.increaseCashValue)});
        }
      }
      this.$nextTick(() => {
        this.chart = this.$echarts.init(this.$refs.dayOnlineChart)
        this.chart.setOption(this.option)
      })
    }
  }
};
</script>
<style>
</style>
